﻿@{
    ViewBag.Title = "SetPhoto";
    Layout = "~/Views/Shared/MyAccount.cshtml";
}

<head>
    <title>SetPhoto</title>
    <link href="~/Content/css/General.css" rel="stylesheet">
    <link href="~/Content/css/SetPhoto.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.form.min.js"></script>
    <link href="~/Content/jquery.Jcrop.min.css" rel="stylesheet" />
    <script src="~/Scripts/myModal.js"></script>
    <script src="@Url.Content("~/Scripts/jquery.Jcrop.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        //jQuery(function ($) {
        //    // Create variables (in this scope) to hold the API and image size
        //    var jcrop_api, boundx, boundy;

        //    $("#target").Jcrop({
        //        onChange: updatePreview,
        //        onSelect: updatePreview,
        //        aspectRatio: 1
        //    }, function () {
        //        // Use the API to get the real image size
        //        var bounds = this.getBounds();
        //        boundx = bounds[0];
        //        boundy = bounds[1];
        //        // Store the API in the jcrop_api variable
        //        jcrop_api = this;
        //    });
        //});
       
        var urlPath = "http://localhost:28162/";
        var jcrop_api, boundx, boundy;
        $(document).ready(function () {
            //上传照片
            $('#uploadfile').change(function () {
                $('#ShangChuanTuPianForm').submit();
            });
            $("#ShangChuanTuPianForm").ajaxForm({
                beforeSend: function () {
                    $("#photo-left").css('background', 'url(../../Content/Images/uploading.png)');
                },
                success: function (response) {
                    if (response != "0") {
                        $("#photo-left").empty();
                        $("#photo-left").css('background', 'none');
                        $("#photo-left").css('border', '1px #ccc solid');
                        $("#CaiJianPanel").css('display', 'block');
                        $("#photo-left").append("<img src=\"../../Content/Images/Temp/" + response.tempfilename + "\" id=\"TempImage\" autocomplete=\"off\" />");
                        $(".photo1").append("<img src=\"../../Content/Images/Temp/" + response.tempfilename + "\" id=\"preview1\" autocomplete=\"off\" />");
                        $(".photo2").append("<img src=\"../../Content/Images/Temp/" + response.tempfilename + "\" id=\"preview2\" autocomplete=\"off\" />");
                        $(".photo3").append("<img src=\"../../Content/Images/Temp/" + response.tempfilename + "\" id=\"preview3\" autocomplete=\"off\" />");
                        $("#TempImage").Jcrop({
                            onChange: updatePreview,
                            onSelect: updatePreview,
                            aspectRatio: 1,
                            setSelect: [0, 0, 160, 160],
                            onChange: changeCropInfo
                        }, function () {
                            var bounds = this.getBounds();
                            boundx = bounds[0];
                            boundy = bounds[1];
                            jcrop_api = this;
                        });
                        $("#ShangChuanTuPianKongJian").hide();
                        $("#CaiJianTuPianKongJian").show();
                        $("#tempfilename").val(response.tempfilename);
                        $("#w_full").val(response.w_full);
                        $("#h_full").val(response.h_full);
                    }
                }
            });
            $("#CaiJianEmpPhotoForm").ajaxForm({
                beforeSend: function () {
                    alert("上传成功")
                    location.href = '/MyAccount/MyAccountIndex'
                    //$("#caijian").attr("disabled", "disabled").val("正在保存");
                },
                success: function (response) {
                    $("#caijian").removeAttr("disabled").val("裁剪并保存");
                    if (response != "0") {
                        JcropAPI.destroy(response);
                        $("#TempImage").remove();
                        $("#SavedImage").remove();
                        $("#uploadPhoto").before("<img src=\"" + urlPath + "/EmpPhoto/" + response + "\" id=\"SavedImage\" style=\"margin-right:10px;\" autocomplete=\"off\" />");
                        $("#PHOTOPATH").val("EmpPhoto/" + response);
                        $("#ShangChuanTuPianKongJian").show();
                        $("#CaiJianTuPianKongJian").hide();
                        layer.close(i);
                    }
                }
            });
            $("#shangchuan").click(function ()
            {
                var filepath = $("#uploadfile").val();
                if (filepath == "") return false;
                var extStart = filepath.lastIndexOf(".");
                var ext = filepath.substring(extStart, filepath.length).toUpperCase();
                if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
                    alert("图片限于bmp,png,gif,jpeg,jpg格式");
                    return false;
                }
            });
            function changeCropInfo(obj) {
                $("#x1").val(obj.x);
                $("#y1").val(obj.y);
                //$("#x2").val(obj.x2);
                //$("#y2").val(obj.y2);
                $("#w").val(obj.w);
                $("#h").val(obj.h);
            }
            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    var rx = 162 / c.w;
                    var ry = 162 / c.h;

                    var rx1 = 70 / c.w;
                    var ry1 = 70 / c.h;

                    var rx2 = 50 / c.w;
                    var ry2 = 50 / c.h;

                    $("#preview1").css({
                        width: Math.round(rx * boundx) + "px",
                        height: Math.round(ry * boundy) + "px",
                        marginLeft: "-" + Math.round(rx * c.x) + "px",
                        marginTop: "-" + Math.round(ry * c.y) + "px"
                    });

                    $("#preview2").css({
                        width: Math.round(rx1 * boundx) + "px",
                        height: Math.round(ry1 * boundy) + "px",
                        marginLeft: "-" + Math.round(rx1 * c.x) + "px",
                        marginTop: "-" + Math.round(ry1 * c.y) + "px"
                    });

                    $("#preview3").css({
                        width: Math.round(rx2 * boundx) + "px",
                        height: Math.round(ry2 * boundy) + "px",
                        marginLeft: "-" + Math.round(rx2 * c.x) + "px",
                        marginTop: "-" + Math.round(ry2 * c.y) + "px"
                    });
                };
            };
            $("#cancel").click(function () {
                location.reload();
            });
            //上传照片结束
        });
    </script>
</head>
<body>
    <div id="content">
                <div class="content-right-top">上传头像</div>
                    <div id="photo-left">
                        @using (Html.BeginForm("ShangChuanEmpPhoto", "Upload", FormMethod.Post, new { enctype = "multipart/form-data", id = "ShangChuanTuPianForm" }))
                        {
                            <input id="uploadfile" hidefocus="true" name="file" class="upload-pic-input" type="file" />
                        }
                    </div>
                    <div class="photo-right">
                        <div class="photo2"></div>
                    </div>
                    <div class="clear"></div>
                    <div id="CaiJianPanel" style="display:none;margin-left:50px;margin-top:10px;">
                        @using (Html.BeginForm("CaiJianEmpPhoto", "Upload", FormMethod.Post, new { id = "CaiJianEmpPhotoForm" }))
                        {
                            <input type="hidden" id="x1" name="x1" />
                            <input type="hidden" id="y1" name="y1" />
                            <input type="hidden" id="w" name="w" />
                            <input type="hidden" id="h" name="h" />
                            <input type="hidden" id="w_full" name="w_full" />
                            <input type="hidden" id="h_full" name="h_full" />
                            <input type="hidden" id="tempfilename" name="tempfilename" />
                            <input type="hidden" id="savedfilename" name="savedfilename" />
                            <input id="caijian" value="裁剪保存" class="btn btn-warning" type="submit" />
                            <input id="cancel" value="取消操作" class="btn btn-warning" type="button" />
                        }
                    </div>
                </div>
</body>
